import { useState } from "react";

const Form = (props) => {
  // console.log(props);
  let [date, setDate] = useState("");
  let [title, setTitle] = useState("");
  let [desc, setDesc] = useState("");
  function dateChange(e) {
    setDate(e.target.value);
  }
  const titleChange = (e) => {
    setTitle(e.target.value);
  };
  const descChange = (e) => {
    setDesc(e.target.value);
  };
  const formChange = () => {
    props.changeForm({
      date: new Date(date),
      title,
      desc,
    });
    clearForm();
  };
  const clearForm = () => {
    setDate("");
    setTitle("");
    setDesc("");
  };
  return (
    <div>
      <div>
        <span>日期：</span>
        <input type="date" value={date} onChange={dateChange}></input>
      </div>
      <div>
        <span>标题：</span>
        <input type="text" value={title} onChange={titleChange}></input>
      </div>
      <div>
        <span>内容：</span>
        <input type="text" value={desc} onChange={descChange}></input>
      </div>
      <button onClick={formChange}>确定</button>
    </div>
  );
};

export default Form;
